<template>
	<view class="wanlshop-classify-container wanl-list">
		<!-- 排序按钮区域 -->
		<view class="head" :class="{ headtop: scrollStype }">
			<view class="cue">
				<view class="bar" style="margin-bottom: 20rpx;background-color: #ffffff;">
					<view class="item" :class="{'current': sortType === 'comprehensive'}"
						@click="sortShops('comprehensive')">综合排序</view>
					<view class="item" :class="{'current': sortType === 'sales'}" @click="toggleSort('sales')">
						<text>销量</text>
						<view class="box">
							<text :class="{ active: salesAsc === 1 }" class="wlIcon-sheng"></text>
							<text :class="{ active: salesAsc === 2 }" class="wlIcon-jiang"></text>
						</view>
					</view>
					<view class="item" :class="{'current': sortType === 'rating'}" @click="toggleSort('rating')">
						<text>评分</text>
						<view class="box">
							<text :class="{ active: ratingAsc === 1 }" class="wlIcon-sheng"></text>
							<text :class="{ active: ratingAsc === 2 }" class="wlIcon-jiang"></text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 左右布局 -->
		<view class="content">
			<!-- 左侧分类 -->
			<view class="left-side">
				<scroll-view scroll-y="true" class="category-list">
					<view v-for="(category, index) in categoryData" :key="index"
						:class="['lists', { 'active': currentCategory === index }]" @click="selectCategory(index)">
						{{ category.name }}
					</view>
				</scroll-view>
			</view>
			<!-- 右侧店铺列表 -->
			<view class="right-side">
				<scroll-view scroll-y="true" class="shop-list">
					<view v-for="(shop, index) in shops" :key="index" class="shop-item" @tap.stop="handleShop(shop.id)">
						<view class="shop-main">
							<view class="shop-header">
								<!-- 店铺图片 -->
								<image :src="shop.image" class="shop-image" />
								<view class="shop-details">
									<!-- 店铺信息 -->
									<text class="shop-name">{{ shop.name }}</text>
									<text class="shop-phone">{{ shop.phone }}</text>
									<view class="shop-rating">
										 <wanl-rate :current="shop.rating" normal="#cccccc"></wanl-rate>{{ shop.rating }}
									</view>
								</view>
								<view class="shop-distance-sales">
									<!-- 距离 -->
									<text class="shop-distance">距您</text>
									<text class="distance-value">{{ shop.distance }}</text>
									<!-- 店铺销量 -->
									<text class="shop-sales">月售: {{ shop.sales }}</text>
								</view>
							</view>
							<view class="shop-product-list">
								<!-- 商品列表 -->
								<view v-for="(product, pIndex) in shop.products" :key="pIndex" class="product-item" @tap.stop="handleGoods(product.id)">
									<image :src="product.image" class="product-image" />
									<text class="product-price">¥ {{ product.price }}</text>
								</view>
							</view>
						</view>
					</view>
					<!-- 占位效果 -->
					<view style="height: 200rpx;"></view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentCategory: 0, // 当前选中的类别
				sortType: 'comprehensive', // 当前排序方式
				salesAsc: 0, // 销量排序，0默认，1升序，2降序
				ratingAsc: 0, // 评分排序，0默认，1升序，2降序
				// 模拟的分类数据
				categoryData: [{
						id: 1,
						name: '新鲜蔬菜'
					},
					{
						id: 2,
						name: '优质水果'
					},
					{
						id: 3,
						name: '肉类食品'
					},
					{
						id: 4,
						name: '熟食凉菜'
					},
					{
						id: 5,
						name: '粮油副食'
					},
					{
						id: 6,
						name: '零食干果'
					}
				],
				// 店铺模拟数据
				shops: [{
						id: 1,
						name: '田园风光蔬菜生鲜生鲜',
						rating: '5.0',
						distance: '623.78km',
						sales: 1123,
						phone: '12345678911',
						image: 'https://inews.gtimg.com/om_bt/OE8piEBa-tbqn-wNvWZl8coi4AlzoUD43upEkoAnIkYL8AA/641',
						products: [{
								price: '6.00',
								image: 'https://inews.gtimg.com/om_bt/OE8piEBa-tbqn-wNvWZl8coi4AlzoUD43upEkoAnIkYL8AA/641'
							},
							{
								price: '6.50',
								image: 'https://inews.gtimg.com/om_bt/OE8piEBa-tbqn-wNvWZl8coi4AlzoUD43upEkoAnIkYL8AA/641'
							},
							{
								price: '6.00',
								image: 'https://inews.gtimg.com/om_bt/OE8piEBa-tbqn-wNvWZl8coi4AlzoUD43upEkoAnIkYL8AA/641'
							}
						]
					},
					{
						id: 2,
						name: '智慧生鲜批发超市',
						rating: '4.0',
						distance: '623.78km',
						sales: 1123,
						phone: '12345678911',
						image: 'https://inews.gtimg.com/om_bt/OE8piEBa-tbqn-wNvWZl8coi4AlzoUD43upEkoAnIkYL8AA/641',
						products: [{
								price: '118.00',
								image: 'https://inews.gtimg.com/om_bt/OE8piEBa-tbqn-wNvWZl8coi4AlzoUD43upEkoAnIkYL8AA/641'
							},
							{
								price: '49.90',
								image: 'https://inews.gtimg.com/om_bt/OE8piEBa-tbqn-wNvWZl8coi4AlzoUD43upEkoAnIkYL8AA/641'
							},
							{
								price: '65.00',
								image: 'https://inews.gtimg.com/om_bt/OE8piEBa-tbqn-wNvWZl8coi4AlzoUD43upEkoAnIkYL8AA/641'
							}
						]
					},
					{
						id: 3,
						name: '雨盛鲜菜',
						rating: '4.5',
						distance: '623.78km',
						sales: 1123,
						phone: '12345678911',
						image: 'https://inews.gtimg.com/om_bt/OE8piEBa-tbqn-wNvWZl8coi4AlzoUD43upEkoAnIkYL8AA/641',
						products: [{
								price: '3.50',
								image: 'https://inews.gtimg.com/om_bt/OE8piEBa-tbqn-wNvWZl8coi4AlzoUD43upEkoAnIkYL8AA/641'
							},
							{
								price: '9.00',
								image: 'https://inews.gtimg.com/om_bt/OE8piEBa-tbqn-wNvWZl8coi4AlzoUD43upEkoAnIkYL8AA/641'
							},
							{
								price: '9.00',
								image: 'https://inews.gtimg.com/om_bt/OE8piEBa-tbqn-wNvWZl8coi4AlzoUD43upEkoAnIkYL8AA/641'
							}
						]
					},
					{
						id: 4,
						name: '范记蔬菜生鲜',
						rating: '4.1',
						distance: '623.78km',
						sales: 1123,
						phone: '12345678911',
						image: 'https://inews.gtimg.com/om_bt/OE8piEBa-tbqn-wNvWZl8coi4AlzoUD43upEkoAnIkYL8AA/641',
						products: [{
								price: '5.00',
								image: 'https://inews.gtimg.com/om_bt/OE8piEBa-tbqn-wNvWZl8coi4AlzoUD43upEkoAnIkYL8AA/641'
							},
							{
								price: '4.00',
								image: 'https://inews.gtimg.com/om_bt/OE8piEBa-tbqn-wNvWZl8coi4AlzoUD43upEkoAnIkYL8AA/641'
							},
							{
								price: '4.50',
								image: 'https://inews.gtimg.com/om_bt/OE8piEBa-tbqn-wNvWZl8coi4AlzoUD43upEkoAnIkYL8AA/641'
							}
						]
					},
					{
						id: 5,
						name: '范记蔬菜生鲜',
						rating: '5.0',
						distance: '623.78km',
						sales: 1123,
						phone: '12345678911',
						image: 'https://inews.gtimg.com/om_bt/OE8piEBa-tbqn-wNvWZl8coi4AlzoUD43upEkoAnIkYL8AA/641',
						products: [{
								price: '5.00',
								image: 'https://inews.gtimg.com/om_bt/OE8piEBa-tbqn-wNvWZl8coi4AlzoUD43upEkoAnIkYL8AA/641'
							},
							{
								price: '4.00',
								image: 'https://inews.gtimg.com/om_bt/OE8piEBa-tbqn-wNvWZl8coi4AlzoUD43upEkoAnIkYL8AA/641'
							},
							{
								price: '4.50',
								image: 'https://inews.gtimg.com/om_bt/OE8piEBa-tbqn-wNvWZl8coi4AlzoUD43upEkoAnIkYL8AA/641'
							}
						]
					},
					{
						id: 6,
						name: '范记蔬菜生鲜',
						rating: '5.0',
						distance: '623.78km',
						sales: 11123,
						phone: '12345678911',
						image: 'https://inews.gtimg.com/om_bt/OE8piEBa-tbqn-wNvWZl8coi4AlzoUD43upEkoAnIkYL8AA/641',
						products: [{
								price: '5.00',
								image: 'https://inews.gtimg.com/om_bt/OE8piEBa-tbqn-wNvWZl8coi4AlzoUD43upEkoAnIkYL8AA/641'
							},
							{
								price: '4.00',
								image: 'https://inews.gtimg.com/om_bt/OE8piEBa-tbqn-wNvWZl8coi4AlzoUD43upEkoAnIkYL8AA/641'
							},
							{
								price: '4.50',
								image: 'https://inews.gtimg.com/om_bt/OE8piEBa-tbqn-wNvWZl8coi4AlzoUD43upEkoAnIkYL8AA/641'
							}
						]
					},
					{
						id: 7,
						name: '范记蔬菜生鲜',
						rating: '5.0',
						distance: '623.78km',
						sales: 1123,
						phone: '12345678911',
						image: 'https://inews.gtimg.com/om_bt/OE8piEBa-tbqn-wNvWZl8coi4AlzoUD43upEkoAnIkYL8AA/641',
						products: [{
								price: '5.00',
								image: 'https://inews.gtimg.com/om_bt/OE8piEBa-tbqn-wNvWZl8coi4AlzoUD43upEkoAnIkYL8AA/641'
							},
							{
								price: '4.00',
								image: 'https://inews.gtimg.com/om_bt/OE8piEBa-tbqn-wNvWZl8coi4AlzoUD43upEkoAnIkYL8AA/641'
							},
							{
								price: '4.50',
								image: 'https://inews.gtimg.com/om_bt/OE8piEBa-tbqn-wNvWZl8coi4AlzoUD43upEkoAnIkYL8AA/641'
							}
						]
					},
					{
						id: 8,
						name: '范记蔬菜生鲜',
						rating: '5.0',
						distance: '623.78km',
						sales: 1123,
						phone: '12345678911',
						image: 'https://inews.gtimg.com/om_bt/OE8piEBa-tbqn-wNvWZl8coi4AlzoUD43upEkoAnIkYL8AA/641',
						products: [{
								price: '5.00',
								image: 'https://inews.gtimg.com/om_bt/OE8piEBa-tbqn-wNvWZl8coi4AlzoUD43upEkoAnIkYL8AA/641'
							},
							{
								price: '4.00',
								image: 'https://inews.gtimg.com/om_bt/OE8piEBa-tbqn-wNvWZl8coi4AlzoUD43upEkoAnIkYL8AA/641'
							},
							{
								price: '4.50',
								image: 'https://inews.gtimg.com/om_bt/OE8piEBa-tbqn-wNvWZl8coi4AlzoUD43upEkoAnIkYL8AA/641'
							}
						]
					},
				]
			};
		},
		mounted() {
			// this.fetchCategories(); // 获取分类数据
			console.log("2323456")
		},
		onShow() {
			console.log("123456")
		},
		methods: {
			// 获取分类数据
			fetchCategories() {
				uni.request({
					url: 'https://example.com/api/categories', // 替换为你的API地址
					method: 'GET',
					success: (res) => {
						if (res.statusCode === 200) {
							this.categoryData = res.data;
							// 默认选择第一个分类并获取店铺数据
							this.selectCategory(0);
						} else {
							console.error('分类数据获取失败:', res);
						}
					},
					fail: (err) => {
						console.error('请求失败:', err);
					}
				});
			},

			// 获取店铺数据
			getShops(categoryId) {
				const sortOrder = this.getSortOrder();
				uni.request({
					url: `https://example.com/api/shops?category_id=${categoryId}&sort=${this.sortType}&order=${sortOrder}`,
					method: 'GET',
					success: (res) => {
						if (res.statusCode === 200) {
							this.shops = res.data;
						} else {
							console.error('店铺数据获取失败:', res);
						}
					},
					fail: (err) => {
						console.error('请求失败:', err);
					}
				});
			},

			// 选择分类
			selectCategory(index) {
				this.currentCategory = index;
				this.getShops(this.categoryData[index].id); // 根据当前分类的ID获取店铺数据
				this.$emit('categorySelected', this.categoryData[index]); // 通知父组件当前选择的分类
			},

			// 切换综合排序
			sortShops(type) {
				if (this.sortType !== type) {
					this.sortType = type; // 切换到综合排序
					this.salesAsc = 0; // 重置销量排序为升序
					this.ratingAsc = 0; // 重置评分排序为升序
					this.getShops(this.categoryData[this.currentCategory].id); // 重新获取店铺数据
				}
			},
			// 切换排序方式和方向
			toggleSort(type) {
				if (this.sortType === type) {
					// 如果点击的是同一个排序类型，则切换升序和降序
					if (type === 'sales') {
						this.salesAsc = this.salesAsc === 1 ? 2 : 1; // 1 表示升序，2 表示降序
					} else if (type === 'rating') {
						this.ratingAsc = this.ratingAsc === 1 ? 2 : 1; // 1 表示升序，2 表示降序
					}
				} else {
					// 切换排序类型
					this.sortType = type;

					if (type === 'sales') {
						this.salesAsc = 1; // 销量排序初始为升序
						this.ratingAsc = 0; // 评分排序重置为默认状态
					} else if (type === 'rating') {
						this.ratingAsc = 1; // 评分排序初始为升序
						this.salesAsc = 0; // 销量排序重置为默认状态
					}
				}
				this.getShops(this.categoryData[this.currentCategory].id); // 按当前分类重新获取店铺
			},

			// 获取当前排序的升序或降序
			getSortOrder() {
				if (this.sortType === 'sales') {
					return this.salesAsc === 1 ? 'asc' : 'desc'; // 1 升序，2 降序
				} else if (this.sortType === 'rating') {
					return this.ratingAsc === 1 ? 'asc' : 'desc'; // 1 升序，2 降序
				}
				return 'asc'; // 默认综合排序为升序
			},
			
			handleShop(id){
				uni.navigateTo({
					url: `/pages/shop/product/list?shop_id=${id}`
				})
			},
			handleGoods(id){
				console.log(id)
				uni.navigateTo({
					url: `/pages/product/goods?id=${id}`
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.wanl-list .bar .item {
		color: #555;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.wanl-list .bar .item.current {
		color: #ff590a;
	}

	.wanl-list .bar .item .box text[class*="wlIcon-"] {
		color: #cccccc;
		margin: 0 10rpx;
		font-weight: bold;
		font-size: 22rpx;
	}

	.wanl-list .bar .item .box text[class*="wlIcon-"].active {
		color: #ff590a;
	}

	.wanlshop-classify-container {
		display: flex;
		flex-direction: column;
		width: 100%;

		.content {
			display: flex;
			background: #f7f7f7;

			.left-side {
				width: 200rpx;
				height: 100vh;
				z-index: 10;

				.category-list {
					width: 100%;
					height: 100%;
					padding-bottom: 210rpx;

					.lists {
						width: 200rpx;
						height: 110rpx;
						box-sizing: border-box;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 26rpx;
						color: #333333;
						font-weight: 400;
						background-color: #ffffff;

						&.active {
							position: relative;
							color: #ff590a;
							font-size: 30rpx;
							font-weight: 600;
							background: #f7f7f7;

							&::before {
								content: '';
								position: absolute;
								border-left: 6rpx solid #ff590a;
								height: 32rpx;
								left: 0;
							}
						}
					}
				}
			}

			.right-side {
				flex: 1;
				height: 100vh;
				width: 100%;
				padding: 0 20rpx 0 20rpx;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;

				.shop-list {
					flex: 1;
					overflow-y: auto;
					padding-bottom: 210rpx;

					.shop-item {
						display: flex;
						padding: 20rpx;
						box-sizing: border-box;
						margin-bottom: 20rpx;
						background-color: #fff;
						border-radius: 10rpx;
						.shop-main {
							width: 100%;
							display: flex;
							flex-direction: column;

							.shop-header {
								display: flex;
								flex-direction: row;
								justify-content: space-between;

								.shop-image {
									width: 150rpx;
									height: 150rpx;
									border-radius: 20rpx;
									object-fit: cover;
								}

								.shop-details {
									flex: 1;
									display: flex;
									flex-direction: column;
									padding-left: 15rpx;

									.shop-name {
										font-size: 24rpx;
										color: #333;
										margin-bottom: 10rpx;
									}

									.shop-phone {
										font-size: 24rpx;
										color: #333;
										margin-bottom: 10rpx;
									}

									.shop-rating {
										display: flex;
										align-items: center;
										font-size: 24rpx;
										color: #fe6600;
									}
								}

								.shop-distance-sales {
									display: flex;
									flex-direction: column;
									align-items: flex-end;

									.shop-distance {
										font-size: 24rpx;
										color: #999;
										margin-bottom: 10rpx;
									}

									.distance-value {
										font-size: 22rpx;
										color: #999;
										margin-bottom: 10rpx;
									}

									.shop-sales {
										font-size: 22rpx;
										color: #999;
									}
								}
							}

							.shop-product-list {
								display: flex;
								justify-content: space-around;
								margin-top: 20rpx;

								.product-item {
									display: flex;
									flex-direction: column;
									align-items: center;
									position: relative;

									.product-image {
										width: 140rpx;
										height: 140rpx;
										border-radius: 20rpx;
										object-fit: cover;
									}

									.product-price {
										background-color: rgba(0, 0, 0, 0.4);
										padding: 5rpx 15rpx;
										text-align: center;
										border-radius: 20rpx;
										font-size: 22rpx;
										color: #fff;
										margin-top: 10rpx;
										position: absolute;
										bottom: 10rpx;
									}
								}
							}
						}
					}
				}
			}
		}
	}
</style>